<template>
  <div>
    <el-pagination
        v-if="pagedata.content > 0"
        :page-sizes="[10, 15, 30, 50]"
        layout="sizes, prev, pager, next"
        :total="pagedata.content"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="paginations"
    />
  </div>
</template>

<script>
import {ref} from "vue";

export default {
  name: "paginations",
  props: ["pages", "handleCurrentChange", "handleSizeChange"],
  setup(props, {emit, attrs, slots}) {
    // console.log(slots.top());
    //中转props里面的数据，因为props是只读的
    console.log(props);

    function cl() {
      console.log(props);
    }

    let pagedata = ref(props.pages);

    let handleCurrentChange = props.handleCurrentChange;

    let handleSizeChange = props.handleSizeChange;

    return {
      handleCurrentChange,
      handleSizeChange,
      pagedata,
    };
  },
};
</script>

<style>
.paginations {
  position: absolute;
  right: 50px;
}
</style>